<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function(){
				$("#save").button({
		            icons: {
		                primary: "ui-icon-disk"
		            }
				}).click(function(){
					if (validateEmpty()){
						disableField(["save","confirm"]);
						$("#save").addClass("ui-button-disabled ui-state-disabled");
						$("#budgetYear").removeAttr("disabled");
						$("#confirm").addClass("ui-button-disabled ui-state-disabled");
						$("#saveForm").submit();
				 	}
				});
				$("#edit").button({
		            icons: {
		                primary: "ui-icon-disk"
		            }
				}).click(function(){
					$("#job").val("edit");
					$("#budgetYear").removeAttr("disabled");
					disableField(["edit","confirm"]);
					$("#edit").addClass("ui-button-disabled ui-state-disabled");
					$("#confirm").addClass("ui-button-disabled ui-state-disabled");
					$("#saveForm").submit();
				});

				$("#btnSearch").button({
		            icons: {
		                primary: "ui-icon-search"
		            }
		        });
				$("#back").button({
		            icons: {
		                primary: "ui-icon-arrowreturnthick-1-w"
		            }
		        }).click(function() {
		        	$("#job").val("back");
		        	$("#saveForm").submit();
		        });
				$("#confirm").button({
		            icons: {
		                primary: "ui-icon-circle-check"
		            }
		        }).click(function() {
					if (validateEmpty()){
						if(confirm('คุณต้องการยืนยันข้อมูล?')==true){
		        			$("#job").val("confirm");
							disableField(["edit","confirm"]);
							$("#edit").addClass("ui-button-disabled ui-state-disabled");
							$("#confirm").addClass("ui-button-disabled ui-state-disabled");
							$("#budgetYear").removeAttr("disabled");
		        			$("#saveForm").submit();
						}
					}
		        });
		        if ('${eob.expenseStatus}' != 'Y') {
					$("#allocateCode").combobox();
			        thaiDatepicker("expenseDate","#","1");
		        }

			});
			function getAllocateByBudgetYear(value){
				var dhtml = new DHTML();
				$("#allocateCodeSpan input").val("");
				$('#allocateCode')
				.find('option')
			    .remove()
			    .end()
			    .append('<option value=""></option>')
			    .val('');
				if(value != ""){
					$.ajax({
						type: "post",
						url: "/provacc/acc67",
						dataType: "json",
						async: false,
						cache: false,
						data: {
							app: "ajax",
							job: "getAllocate",
							budgetYear: value
						},
						success: function(data) {
							if(data.length > 0){
								for(var i=0;i<data.length;i++){
									dhtml.createElement(document.getElementById("allocateCode"), ["option","value="+data[i].code], data[i].code +" - "+ data[i].name);
								}
							}else{
								return false;
							}
						}
					});
				}
			}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC60312')}"/>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="saveForm" id="saveForm" action="${pageContext.request.contextPath}/acc6" method="post">
		<input type="hidden" name="app" id="app" value="ACC60312"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<input type="hidden" name="docNo" id="docNo" value="${eob.docNo}"/>
		<c:if test="${eob.expenseStatus=='Y'}" var="isDisabled"/>
			<table width="100%" class="ui-widget ui-widget-content" border="0">
				<tr>
					<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC60312}</b></th>
				</tr>
				<tr>
					<td width="20%" class="bold">จังหวัด : </td>
					<td>
						<c:if test="${userInfo.areaLevel =='3'}">
							<c:forEach var="data" items="${userInfo.listUserProvice}">
								${data.provinceName}
								<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">
							</c:forEach>
						</c:if>
						<c:if test="${userInfo.areaLevel=='1' || userInfo.areaLevel=='2'}">
							<c:if test="${job == 'save'}">
								<select name="provinceId" id="provinceId">
									<option value="">----- เลือก -----</option>
									<c:forEach var="data" items="${userInfo.listUserProvice}">
										<c:if test="${data.provinceId == provinceId}" var="provinceSeleted"/>
										<option value="${data.provinceId}" ${provinceSeleted?'selected':''}>${data.provinceName}</option>
									</c:forEach>
								</select>
								<span id="$provinceId" class="red">*</span>
							</c:if>
							<c:if test="${job == 'edit' || job == 'view'}">
								${provinceName}
								<input type="hidden" name="provinceId" id="provinceId" value="${provinceId}">
							</c:if>
						</c:if>
					</td>
				</tr>
				<tr>
					<td width="20%" class="bold">เลขที่เอกสาร : </td>
					<td>${empty eob.docNo ? 'สร้างจากระบบ' : eob.docNo}</td>
				</tr>
				<tr>
					<td class="bold">ปีงบประมาณ : </td>
					<td>
						<select name="budgetYear" id="budgetYear" onchange="getAllocateByBudgetYear(this.value);" ${job == 'edit' || isDisabled ? 'disabled' : ''}>
							<option value="">----- เลือก -----</option>
							<c:if test="${!empty listBudgetYear}">
								<c:forEach var="data" items="${listBudgetYear}" varStatus="x">
									<c:if var="selected" test="${data.BUDGET_YEAR == eob.budgetYear}"/>
									<option value="${data.BUDGET_YEAR}" ${selected ? 'selected' : ''}>${data.BUDGET_YEAR}</option>
								</c:forEach>
							</c:if>
						</select><span id="$budgetYear" class="red">*</span>
					</td>
				</tr>
				<tr>
					<td class="bold">วันที่ทำรายการ : </td>
					<td>
						<c:if test="${job == 'save'}"><!-- add -->
							${now}
						</c:if>
						<c:if test="${job == 'edit'}"><!-- update -->
							${el:dateTh(eob.createdDate)}
						</c:if>
						<c:if test="${job == 'view'}"><!-- view -->
							${el:dateTh(eob.createdDate)}
						</c:if>
					</td>
				</tr>
				<tr>
					<td class="bold">วันที่จ่าย : </td>
					<td>
						<input type="text" name="expenseDate" id="expenseDate" ${ isDisabled ? 'disabled' : '' } size="12" maxlength="10" onkeypress="return numberAndSlash(event);" onblur="dateFormat(this);" value="${el:dateTh(eob.expenseDate)}">
						<span id="#expenseDate" class="red">*</span>
					</td>
				</tr>
				<tr>
					<td class="bold">เลขที่เอกสารอ้างอิง : </td>
					<td>
						<input type="text" name="refNo" id="refNo" maxlength="50" ${ isDisabled ? 'disabled' : '' } onblur="checkLength50(this);" value="${eob.refNo}">
						<span id="#refNo" class="red">*</span>
					</td>
				</tr>
				<tr>
					<td class="bold">กองทุนย่อยเฉพาะด้าน : </td>
					<td>
						<span id="allocateCodeSpan">
						<select name="allocateCode" id="allocateCode"  ${isDisabled ?'disabled':''}>
							<option value="">----- เลือก -----</option>
							<c:forEach var="allocateData" items="${listAllocate}">
								<c:if test="${eob.allocateCode == allocateData.ALLOCATE_CODE}" var="selected"/>
								<option value="${allocateData.ALLOCATE_CODE}" ${selected?'selected':''}>${allocateData.ALLOCATE_CODE} - ${allocateData.ALLOCATE_NAME}</option>
							</c:forEach> 
						</select>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span id="$allocateCode" class="red" style="position: absolute;">*</span>
						</span>
					</td>
				</tr>
				<tr>
					<td class="bold">จำนวนเงิน : </td>
					<fmt:formatNumber var="expenseAmount" pattern="#,##0.00" value="${eob.expenseAmount}"/>
					<td>
						<input type="text" name="expenseAmount" id="expenseAmount" ${ isDisabled ? 'disabled' : '' } onkeypress="return numberAndDot(event);" value="${expenseAmount}" onblur="this.value = addCommas2D(this.value);"/>
						<span id="#expenseAmount" class="red">*</span>
					</td>
				</tr>
				<tr>
					<td class="bold" valign="top">คำอธิบายรายการ : </td>
					<td>
						<textarea cols="40" rows="5" name="expenseDesc" id="expenseDesc" ${ isDisabled ? 'disabled' : '' }>${eob.expenseDesc}</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<c:if test="${job == 'save'}">
							<c:if test="${fn:contains(auth, 'I')}">
								<button type="button" name="save" id="save" class="acc67-button">บันทึกข้อมูล</button>
							</c:if>
						</c:if>
						<c:if test="${job == 'edit' && eob.expenseStatus != 'Y'}">
							<c:if test="${fn:contains(auth, 'U')}">
								<button type="button" name="edit" id="edit"  class="acc67-button">บันทึกข้อมูล</button>
								<button type="button" name="confirm" id="confirm"  class="acc67-button">ยืนยันข้อมูล</button>
							</c:if>
						</c:if>
						<button type="button" name="back" id="back"  class="acc67-button">ย้อนกลับ</button>
					</td> 
				</tr>
			</table>
		</form>
	</body>
</html>